<template>
    <div
        class="swiper"
        v-if="isShow"
        @click="gotoDetail"
    >
        <swiper
            :options="swiperOption"
            class="swiper-container"
            ref="mySwiper"
            v-if="swiperList.length"
        >
            <swiper-slide
                class="swiper-slide"
                :style="swiperStyle"
                v-if="media"
            >
                <video
                    class="video-box"
                    id="videoPlay"
                    name="media"
                    ref="videoPlayer"
                >
                    <source
                        :src="media"
                        type="video/mp4"
                    >
                </video>
                <div
                    class="play-box"
                    :style="{backgroundImage:`url(${swiperList[0].title_img})`}"
                    v-if="isPlay == false"
                >
                    <img
                        class="play"
                        src="@/assets/images/home/timg.png"
                    />
                </div>
            </swiper-slide>
            <swiper-slide
                class="swiper-slide"
                :style="swiperStyle"
                v-for="(item,index) of swiperList"
                :key="index"
            >
                <img
                    class="swiper-img"
                    :src="item.title_img"
                />
            </swiper-slide>
            <div
                class="swiper-pagination"
                slot="pagination"
            ></div>
        </swiper>
    </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
    name: 'CommonSwiper',
    props: ['swiperList', 'swiperHeight', 'autoplay', 'media'],
    data() {
        return {
            isShow: true,
            swiperOption: {
                pagination: '.swiper-pagination',
                loop: true,
                autoplay: this.autoplay,
                disableOnInteraction: false,
                threshold: 30,
                observer: true,
                onClick: () => {
                    // this.playVideo()
                    // let swiper = this.$refs.mySwiper.swiper
                    // let i = swiper.realIndex
                    // this.$router.push(this.swiperList[i].link)
                }
            },
            isPlay: false
        }
    },
    mounted() {
        const that = this
        if (this.media) {
            setTimeout(function() {
                let swiper = that.$refs.mySwiper.swiper
                that.$refs.videoPlayer.onended = function() {
                    that.isPlay = false
                }
                swiper.on('slideChangeEnd', function() {
                    if (swiper.realIndex > 0) {
                        that.isPlay = false
                        that.$refs.videoPlayer.pause()
                    }
                })
            }, 1000)
        }
    },
    methods: {
        gotoDetail() {
            let swiper = this.$refs.mySwiper.swiper
            let i = swiper.realIndex
            if (i == 0 && this.media) {
                if (this.isPlay) {
                    this.isPlay = false
                    this.$refs.videoPlayer.pause()
                } else {
                    this.isPlay = true
                    this.$refs.videoPlayer.play()
                }
            } else {
                this.$router.push(this.swiperList[i].link)
            }
        }
    },
    computed: {
        swiperStyle() {
            return {
                paddingBottom: this.swiperHeight
            }
        }
    },
    activated() {
        this.isShow = true
    },
    deactivated() {
        this.isShow = false
    }
}
</script>

<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active
    background #3e6d5c
.swiper-slide
    height 0
    overflow hidden
    .play-box
        position absolute
        top 0
        left 0
        width 100%
        height 10rem
        background-size 100%
        background-repeat no-repeat
        display flex
        align-items center
        justify-content center
        .play
            width 50px
    .video-box
        width 100%
        height 10rem
    .swiper-img
        width 100%
</style>


